<script lang="ts" setup>
import { computed, reactive, ref, useTemplateRef } from "vue";
import MyDialog from "@/components/MyDialog.vue";
import type { Hero } from "@/types/Hero";
import { deepClone } from "@/utils/conversion";
import { socketSpeak } from "@/services/socket";
import { useRoomState } from "@/hooks/useRoomState";
import { STATIC_URL } from "@/configs/yz";
import HeroDetail from "./HeroDetail.vue";

const roomState = useRoomState();
const show = ref(false);
const hidden = ref(true);
const tetrarch = ref(false);
const selection: Hero[] = reactive([]);
const selectedIds: number[] = reactive([]);
const onlyTetrarch = ref(false);
let currentResolve: null | Function = null;
const oHeroDetail = useTemplateRef("oHeroDetail");
const selectionV2 = computed(() => {
	if (tetrarch.value) return selection.filter((v) => v.tetrarch);
	return selection;
});
const open = (props: { heros: Hero[]; hidden: boolean; tetrarch?: boolean; selectedIds: number[]; onlyTetrarch?: boolean }): Promise<number[]> => {
	return new Promise((resolve) => {
		show.value = true;
		hidden.value = props.hidden;
		tetrarch.value = props.tetrarch || false;
		selection.length = 0;
		selection.push(...deepClone(props.heros));
		selectedIds.length = 0;
		selectedIds.push(...deepClone(props.selectedIds));
		onlyTetrarch.value = props.onlyTetrarch || false;
		if (onlyTetrarch.value) socketSpeak({ roomId: roomState.room.value!.roomId, message: "筛选了主公武将。" });
		currentResolve = resolve;
	});
};
const select = (id: number) => {
	const index = selectedIds.indexOf(id);
	if (index == -1) selectedIds.push(id);
	else selectedIds.splice(index, 1);
};
const heroMousedown = (hero: Hero) => {
	let timer = setTimeout(() => {
		oHeroDetail.value?.open({ hero });
	}, 500);
	document.body.addEventListener("mouseup", fn);
	function fn() {
		clearTimeout(timer);
		document.body.removeEventListener("mouseup", fn);
	}
};
const heroTouchStart = (hero: Hero) => {
	let timer = setTimeout(() => {
		oHeroDetail.value?.open({ hero });
	}, 200);
	document.body.addEventListener("touchend", fn);
	function fn() {
		clearTimeout(timer);
		document.body.removeEventListener("touchend", fn);
	}
};
defineExpose({ open });
</script>

<template>
	<MyDialog v-model:show="show">
		<div class="picker" @click.stop>
			<div class="content">
				<div class="selection">
					<div v-for="v in selectionV2" :key="v.heroId" :class="{ card: true, 'hero-card': true, active: selectedIds.includes(v.heroId) }" @click="select(v.heroId)">
						<template v-if="!hidden">
							<div
								:class="{
									title: true,
									wei: v.factions[0] == '魏',
									shu: v.factions[0] == '蜀',
									wu: v.factions[0] == '吴',
									qun: v.factions[0] == '群',
									ye: v.factions[0] == '野',
									shen: v.factions[0] == '神',
								}"
							>
								<i v-for="v2 in v.factions" :key="v2">{{ v2 }}</i>
								<b>{{ v.name }}</b>
								<p class="blood-count">
									<svg class="icon"><use href="#droplet" /></svg>
									<span>{{ v.health }}/{{ v.healthLimit }}</span>
								</p>
							</div>
							<div class="content">
								<div class="covers">
									<picture @mousedown="!hidden && heroMousedown(v)" @touchstart="!hidden && heroTouchStart(v)">
										<img :src="STATIC_URL + v.skins[0].src" alt="" />
									</picture>
								</div>
							</div>
						</template>
					</div>
				</div>
			</div>
			<button class="primary" @click="currentResolve?.(selectedIds), (show = false)">确定</button>
		</div>
		<HeroDetail ref="oHeroDetail" />
	</MyDialog>
</template>

<style lang="scss" scoped>
@use "../styles/picker.scss";
</style>
